<template>
  <section v-if="this.tabbar" class="pages-tabbar">
    <component :is="tabbar"></component>
  </section>
</template>

<script>
  export default {
    name: 'pages-tabbar',
    data() {
      return {
        tabbar: null
      }
    },
    methods: {
      setHeight() {
        this.$parent.bottom = this.$el.offsetHeight
      },
      resize() {
        this.$nextTick(() => {
          setTimeout(() => {
            this.setHeight()
          },300)
        })
      }
    },
    created() {
      const tabbarConfig = window.apps.tabbarConfig
      const name = this.$route.meta.tabbar
      this.tabbar = tabbarConfig[name] ? name : null
    },
    mounted(){
      window.addEventListener('resize', this.resize, false)
      this.setHeight()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.resize)
    }
  }
</script>
